<template>
  <div class="travel-spot-list card-item">
    <el-empty v-if="travelStore.travelSpotList.length === 0" description="暂无旅行记录"/>

    <div v-else class="list">
      <travel-card v-for="(item, index) in travelStore.travelSpotList"
                   :key="index" :travel-item="item"/>
    </div>

    <el-pagination
        v-model="travelStore.pageInfo.currentPage"
        :page-size="travelStore.pageInfo.pageSize"
        layout="total, prev, pager, next"
        :total="travelStore.pageInfo.totalSize"
    />

    <el-button v-if="isLargeScreen()"
               type="primary" :icon="Plus" circle
               @click="addTravelSpotClick" class="add-new" />
  </div>
</template>

<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
import TravelCard from '@/components/Travel/TravelCard.vue'
import { useTravelStore } from '@/store/travel.ts'
import { isLargeScreen } from '@/utils'

const travelStore = useTravelStore()

const addTravelSpotClick = () => {
  travelStore.travelSpotApiType = 'ADD'
  travelStore.travelSpotDialog = {
    title: '新增景点',
    visible: true,
    data: travelStore.getEmptyTravelSpot()
  }
}
</script>
